<%--
  Created by IntelliJ IDEA.
  User: 29012
  Date: 2021/10/8
  Time: 19:01
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix='fmt' uri="http://java.sun.com/jsp/jstl/fmt" %>
<html>
<head>
    <title>${videoInfo.data.videoName}</title>
  <%--jq--%>
  <script src="${pageContext.request.contextPath}/js/jquery-3.6.0.min.js"></script>
  <%--hearder.css--%>
  <link rel="stylesheet" href="${pageContext.request.contextPath}/css/header/header.css">
  <%--设置页面左上角浏览器图标--%>
  <link rel="shortcut icon"  href="image/zhengKe.ico" type="image/x-icon" />
  <%--header.js--%>
  <script src="${pageContext.request.contextPath}/js/header/header.js"></script>
  <%--video.css--%>
  <link rel="stylesheet" href="${pageContext.request.contextPath}/css/learn/video.css">
  <%--video.js--%>
<%--    src="${pageContext.request.contextPath}/js/learn/video.js"--%>
  <script>
      // 子导航栏选中效果
      function subnav_checker() {
          $(".course_subnav li").click(function () {
              $(".course_subnav li").each(function () {
                  $(this).removeClass("checked");
              });
              $(this).addClass("checked");
              if ($(this).text() == "评论") {
                  $(".note").hide();
                  $(".comment").show();
              } else {
                  $(".note").show();
                  $(".comment").hide();
              }
          });
      }

      // 打开提问页面
      function open_questions() {
          $(".open_questions").click(
              function () {
                  $(".questions_div").show();
              }
          );
      }

      // 关闭弹窗
      function close_questions() {
          $(".close").click(function () {
              $(".questions_div").hide();
          });
      }

      // 问题筛选
      function screen_questions() {
          $(".screen").click(function () {
              $(".screen").each(function () {
                  $(this).removeClass("checked");
              });
              $(this).addClass("checked");
          });
      }

      // 点赞
      function thumb() {
          $(".actions_a").click(function () {
              var num = parseInt(
                  $(this).children().eq(1).text()
              );
              if (
                  $(this).children().eq(1).data("click") ==0 ||
                  $(this).children().eq(1).data("click") ==undefined
              ) {
                  num++;
                  $(this).children().eq(1).text(num);
                  $(this).children().eq(1).data("click", 1);
              } else {
                  num--;
                  $(this).children().eq(1).text(num);
                  $(this).children().eq(1).data("click", 0);
              }
          });
      }

  </script>

    <script>
        window.onload = function (){
            myVid = document.getElementById("video");
            myVid.currentTime = ${learnRate};
            subnav_checker();
            open_questions();
            close_questions();
            screen_questions();
            thumb();
        }
    </script>
</head>
<body>
<c:if test="${!empty consumerCourse}">
    <script>
        alert(consumerCourse);
    </script>
</c:if>
<div id="header">
    <div id="nav">
        <div id="menu">

            <!-- logo -->
            <div id="logo">
                <a href="${pageContext.request.contextPath}/index">
                    <svg t="1634123912096" class="icon" viewBox="0 0 1335 1024" version="1.1"
                         xmlns="http://www.w3.org/2000/svg" p-id="9038" width="60" height="60">
                        <path d=" M1296.918261
                        267.130435c-199.902609-89.043478-400.695652-170.963478-600.153044-258.671305a79.693913 79.693913
                        0 0 0-62.330434 0C438.53913 94.386087 238.636522 178.086957 44.521739 260.897391c-20.925217
                        8.45913-41.850435 16.918261-41.850435 44.521739s20.925217 37.398261 41.850435
                        44.52174c181.648696 81.92 365.078261 156.716522 548.062609 240.417391a142.024348 142.024348 0 0
                        0 146.031304 0 489.73913 489.73913 0 0 1 83.255652-37.843478c116.646957-49.864348
                        229.286957-99.728696 350.386087-150.038261v421.175652c0 24.932174 8.013913 33.391304 32.946087
                        33.391304s33.391304-4.452174 33.391305-33.391304c0-125.106087
                        4.452174-254.21913-4.006957-379.325217 0-49.864348 8.45913-83.255652
                        62.330435-95.72174a41.850435 41.850435 0 0 0
                        38.733913-41.850434c0-24.932174-17.808696-33.391304-38.733913-39.624348z" p-id="9039"></path>
                        <path d=" M1088.556522 548.507826c0-29.384348-8.013913-29.384348-28.939131-20.925217-112.64
                        51.2-225.28 95.721739-333.467826 146.031304a143.805217 143.805217 0 0 1-116.646956 0C496.862609
                        623.304348 384.222609 578.782609 272.027826
                        527.582609c-20.925217-8.45913-24.932174-4.006957-24.932174 16.918261V712.347826a211.478261
                        211.478261 0 0 0 141.579131 229.286957 640.222609 640.222609 0 0 0 570.768695-8.459131
                        211.923478 211.923478 0 0 0 129.113044-222.608695c-4.006957-53.871304 0-107.742609
                        0-162.059131z" p-id="9040"></path>
                    </svg>
                </a>
            </div>

            <!-- 首页 -->
            <div class="jump">
                <a href="${pageContext.request.contextPath}/index">首页</a>
            </div>

            <!-- 全部课程 -->
            <div class="jump">
                <a href="${pageContext.request.contextPath}/course">全部课程</a>
            </div>

            <!-- 苏鸿社区 -->
            <div class="jump">
                <a href="${pageContext.request.contextPath}/community?label=推荐">苏鸿社区</a>
            </div>

            <!-- 搜索 -->
            <div class="function seach">
                <input type="text" placeholder="请输入关键字..." />
                <div class="header_hot">
                    <a href="#" class="hot_info">Vue</a>
                    <a href="#" class="hot_info">Python</a>
                </div>
                <a href="#" id="search_icon">
                    <svg t="1634122309089" class="icon" viewBox="0 0 1024 1024" version="1.1"
                         xmlns="http://www.w3.org/2000/svg" p-id="3764" width="20" height="20">
                        <path d=" M953.474215 908.234504l-152.576516-163.241391c61.92508-74.48211 95.81186-167.36973
                            95.81186-265.073744 0-229.294809-186.63531-415.930119-416.102133-415.930119-229.294809
                            0-415.930119 186.63531-415.930119 415.930119s186.63531 415.930119 415.930119
                            415.930119c60.032925 0 118.00168-12.55703 172.186125-37.327062 16.169326-7.396607
                            23.221905-26.318159
                            15.825298-42.315471-7.396607-16.169326-26.318159-23.221905-42.315471-15.825298-45.927768
                            20.813707-94.951789 31.478582-145.695952 31.478582-194.031917
                            0-351.94087-157.908953-351.94087-351.94087 0-194.031917 157.908953-351.94087
                            351.94087-351.94087 194.031917 0 351.94087 157.908953 351.94087 351.94087 0
                            91.339493-34.918864 177.86259-98.048043 243.743995-12.213002 12.729044-11.868974 33.026709
                            0.860071 45.239711 1.032085 0.860071 2.236183 1.204099 3.268268 2.064169 0.860071 1.204099
                            1.376113 2.752226 2.408198 3.956325l165.477574 177.00252c6.192508 6.70855 14.793214
                            10.148833 23.393919 10.148833 7.912649 0 15.653284-2.92424 21.845792-8.600706C964.827146
                            941.433227 965.515202 921.135562 953.474215 908.234504z" p-id="3765" id="search-img">
                        </path>
                    </svg>
                </a>
            </div>

            <!-- 登录注册 -->
            <div class="function ">
                <div class="consumer">
                    <!-- 登录/注册  -->
                    <c:if test="${empty ServiceResponse}">
                        <a href="${pageContext.request.contextPath}/login/login.jsp" class="head portrait" class="login">
                            <svg t="1634123426498" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                 xmlns="http://www.w3.org/2000/svg" p-id="6398" width="30" height="30">
                                <path d=" M880.182 987.568H143.818C98.705 987.568 62 952.882 62 910.245V801.52c0-122.986
                                110.113-223.042 245.455-223.042h409.09C851.887 578.478 962 678.533 962 801.52v108.726c0
                                42.636-36.704 77.322-81.818 77.322z m-736.364-82.197l736.363
                                0.379V801.52c0-77.873-73.408-141.224-163.637-141.224h-409.09c-90.228 0-163.636 63.351-163.636
                                141.224v103.851zM511.67 547.796c-140.984 0-255.682-114.697-255.682-255.682 0-140.984
                                114.697-255.682 255.682-255.682 140.985 0 255.682 114.697 255.682 255.682 0.001 140.985-114.697
                                255.682-255.682 255.682z m0-429.546c-95.871 0-173.864 77.993-173.864 173.864S415.8 465.978
                                511.67 465.978s173.864-77.993 173.864-173.864S607.541 118.25 511.67 118.25z" p-id="6399">
                                </path>
                            </svg>
                        </a>
                    </c:if>
                    <c:if test="${!empty ServiceResponse}">
                        <a href="${pageContext.request.contextPath}/user/mycourse.jsp" class="consumer_portrait">
                            <img src="http://${ServiceResponse.data.consumerProfile}" alt="">
                        </a>
                        <!-- 注销 -->
                        <a href="${pageContext.request.contextPath}/cons/logout" class="logout">
                            <svg t="1634123313659" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                 xmlns="http://www.w3.org/2000/svg" p-id="5401" width="30" height="30">
                                <path d=" M424.19 675.833l64.823 64.823 229.869-229.869-229.869-229.869-64.823 64.823 118.612
                                119.072H98.236v91.948h444.567L424.19 675.833zM833.817 97.022H190.183c-51.031 0-91.948
                                41.376-91.948 91.948v183.895h91.948V188.97h643.633v643.633H190.183V648.708H98.236v183.895c0
                                50.571 40.917 91.948 91.948 91.948h643.633c50.571 0 91.948-41.376
                                91.948-91.948V188.97c-0.001-50.571-41.377-91.948-91.948-91.948z" p-id="5402"></path>
                            </svg>
                        </a>
                    </c:if>
                </div>
            </div>

        </div>
    </div>
</div>

<!-- 提交问题 -->
<div class="questions_div">
  <div class="questions">
    <!-- 关闭提问页面 -->
    <span class="close">
      <svg t="1632485376545" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4436" width="32" height="32">
        <path d="M576 512l277.333333 277.333333-64 64-277.333333-277.333333L234.666667 853.333333 170.666667 789.333333l277.333333-277.333333L170.666667 234.666667 234.666667 170.666667l277.333333 277.333333L789.333333 170.666667 853.333333 234.666667 576 512z" fill="#444444" p-id="4437">
        </path>
      </svg>
    </span>
    <h4>留下足迹：</h4>
    <br>
    <form>
      <input type="hidden" class="time_input" name="updateTime">
      <input type="hidden" name="videoId" value="${videoInfo.data.chapterId}">
      <input type="hidden" name="consumerId" value="1">
      <textarea class="questions_input" placeholder="请输入内容" maxlength="200" name="noteContent"></textarea>
      <br>
      <input type="button"  id="close_btn" value="提交评论">
    </form>
  </div>
</div>


<div class="main">
  <!-- 学习视频 -->
  <div class="learn_video_background">
    <div class="learn_video_div">
      <video src="${videoInfo.data.storageLocation}" class="learn_video" id="video" controls preload>
          <source  type="video/mp4"/>
      </video>
      </video>
    </div>
  </div>

  <!-- 视频相关内容 -->
  <div class="course_subnav">
    <ul>
      <li class="checked">评论</li>
<%--      <li>笔记</li>--%>
      <li>资料下载</li>
    </ul>
  </div>

  <!-- 评论内容 -->
  <div class="under_video">
    <div class="comment">
      <div class="others_comment">
        <a href="javascript:;" class="screen checked">全部</a>
<%--        <a href="javascript:;" class="screen">精华</a>--%>
        <a href="javascript:;" class="open_questions">小有所得</a>
      </div>
      <div class="video_comment">

      </div>
      <div class="page_btu">

      </div>
    </div>

<%--    <div class="note">--%>
<%--      <div class="others_note">--%>
<%--        <a href="javascript:;" class="open_note">记下心得</a>--%>
<%--      </div>--%>

<%--      <!-- 用户笔记 -->--%>
<%--      <div class="user_comment">--%>

<%--        <!-- 用户姓名 -->--%>
<%--        <div class="user_info">--%>
<%--          <a href="javascript:;" class="username">hitherto</a>--%>
<%--        </div>--%>
<%--        <!-- 用户评价 -->--%>
<%--        <div class="content">对于Java小白来说非常有用，知识点讲得非常清晰</div>--%>
<%--        <!-- 点赞+评价时间 -->--%>
<%--        <div class="operation">--%>
<%--          <div class="actions">--%>
<%--            <a title="赞" href="javascript:;" class="actions_a">--%>
<%--              <span class="icon_thumb_revert"></span>--%>
<%--              <em>0</em>--%>
<%--            </a>--%>
<%--          </div>--%>
<%--          <div class="time_div">时间：<span class="time">2021-09-07</span></div>--%>
<%--        </div>--%>
<%--      </div>--%>
    </div>
  </div>
</div>

<div class="footer"></div>
<script>
  page(1);
  $("#close_btn").click(function (){
      $(".time_input").val(new Date().getTime());
      // alert( $(".time_input").val());
      var note_form = $(this).parent().serialize();
      console.log(note_form);
      $.post("${pageContext.request.contextPath}/note/save",note_form,function (){
      },"json")
      page(1);
      $(".questions_input").val(null)
      $(".questions_div").hide();
  })
  function page(pagenum){
    $(".video_comment").html(null);
    $(".page_btu").html(null);
    $.get("${pageContext.request.contextPath}/note/${videoInfo.data.chapterId}/"+pagenum,null,function (noteInfo){
      var voDate = noteInfo.data;
      for (var i = 0 ; i < voDate.list.length ; i++){
        var note = '<div class="user_comment">' +
                '<!-- 用户姓名 -->' +
                '<div class="user_info">' +
                '<a href="javascript:;" class="username">'+ voDate.list[i].consumer.consumerName +'</a>' +
                '</div>' +
                '<!-- 用户评价 -->' +
                '<div class="content">'+ voDate.list[i].note.noteContent +'</div>' +
                '<!-- 点赞+评价时间 -->' +
                '<div class="operation">' +
                '<%--          <div class="actions">--%>' +
                '<%--            <a title="赞" href="javascript:;" class="actions_a">--%>' +
                '<%--              <span class="icon_thumb_revert"></span>--%>' +
                '<%--              <em>0</em>--%>' +
                '<%--          </div>--%>' +
                '<div class="time_div">时间：<span class="time">'+ voDate.list[i].note.updateTime +'</span></div>' +
                '</div>' +
                '</div>'
        $(".video_comment").append(note);
      }
      var page_div='<span">当前页码:<span class="nowPage">'+ noteInfo.data.pageNum +'</span></span>' +
              '<input type="button" value="上一页" class="pageUp page">' +
              '<input type="button" value="下一页" class="pageDown page">' +
              '<span>总页码:<span class="allPage">'+ noteInfo.data.pages +'</span></span>';
      $(".page_btu").append(page_div);
      console.log(voDate);
    },"json")
  }
  page_change ()
  function page_change (){
    $(".page_btu").on('click','.pageUp',function (){
      if (parseInt($(".nowPage").text()) > 1)
        page(parseInt($(".nowPage").text()) - 1)
    })
    $(".page_btu").on('click','.pageDown',function (){
      if (parseInt($(".nowPage").text()) < parseInt($(".allPage").text()))
        page(parseInt($(".nowPage").text()) + 1)
    })
  }
</script>
<script>
    window.onbeforeunload = function (e){
        //设置循环,没10毫秒执行一次
        // var id = setInterval(frame, 10);
        // function frame() {
        //
        // }
        myVid = document.getElementById("video");
        var videoTime;
        //播放位置
        var endTime;
        //播放百分比
        var endLength;

        //执行获取方法
        url = "${pageContext.request.contextPath}/learn/video/leave";

        // 使用duration获取视频总时长,使用toFixed保留两位小数
        videoTime = myVid.duration.toFixed(2) + "s";

        // 使用currentTime获取视频当前播放位置
        endTime =parseFloat(myVid.currentTime.toFixed(2));

        //获取当前位置占总视频百分比并显示
        var bili = (myVid.currentTime.toFixed(2) / myVid.duration.toFixed(2)) * 100;

        endLength = bili.toFixed(0)/100;

        //将获取到的数据传到controller层
        $.post(
            url,
            {"endTime":endTime ,
            "endLength":endLength ,
            "chapterId":${videoInfo.data.chapterId} ,
            "videoId":${videoInfo.data.videoId} ,
            "createTime":new Date()} ,
            function (){},
            "json"
        )
    }
</script>
</body>
</html>
